<template>
  <div class="login-wrap" style="background-color: darkslateblue; height: 100vh;width: 100%;overflow: hidden">


    <div class="ms-login">


      <div class="ms-title">欢迎登录</div>


      <el-form ref="form" :model="form" :rules="rules" class="ms-content" size="large">


        <!--        <el-form-item prop="userName" style="padding-bottom: 10px;">-->


        <!--          <el-input v-model="form.userName" clearable placeholder="请输入账户名" prefix-icon="el-icon-s-custom"></el-input>-->


        <!--        </el-form-item>-->


        <el-form-item prop="userId" style="padding-bottom: 10px;">


          <el-input v-if="this.form.roleId!=4" v-model="form.userId" :placeholder=this.myPlaceholder clearable
                    prefix-icon="el-icon-lock"></el-input>


        </el-form-item>


        <el-form-item prop="userPassword" style="padding-bottom: 10px;">


          <el-input v-if="this.form.roleId!=4" v-model="form.userPassword" clearable placeholder="请输入密码"
                    prefix-icon="el-icon-lock" show-password></el-input>


        </el-form-item>


        <div class="login-btn">


          <el-radio-group v-model="form.roleId" prop="userRole" style="margin-top: -30px" @change="changePlaceholder">


            <el-radio :label="1">学生</el-radio>


            <el-radio :label="2">教师</el-radio>


            <el-radio :label="3">管理员</el-radio>


            <el-radio :label="4">访客</el-radio>


          </el-radio-group>


          <el-form-item>


            <el-button v-if="this.form.roleId!=4" style="width: 100%" type="primary" @click="onLogin('form') ">登录


            </el-button>


            <el-button v-else-if="this.form.roleId==4" style="width: 100%" type="danger" @click="goToHome ">访问


            </el-button>


          </el-form-item>


        </div>


        <!--        <p class="login-tips">Tips : 用户名和密码随便填。</p>-->


      </el-form>


    </div>


  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Login",

  data() {
    return {
      myPlaceholder: "请输入管理员工号",

      form: {
        userId: '',
        userPassword: '',
        roleId: 1,
      },
      rules: {
        userName: [
          {required: true, message: '请输入账户名', trigger: 'blur'},
          {max: 15, message: '长度需小于 8 个字符', trigger: 'blur'}
        ],
        userId: [
          {required: true, message: '请输入账户名', trigger: 'blur'},
          {max: 15, message: '长度需小于 8 个字符', trigger: 'blur'}
        ],
        userPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {max: 12, message: '长度需小于 12 个字符', trigger: 'blur'}
        ],
        userRole: {required: true}
      },

    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home')
    },
    changePlaceholder() {
      // alert(this.form.roleId)
      if (this.form.roleId == 3) {
        this.myPlaceholder = '请输入管理员工号'
      } else if (this.form.roleId == 2) {
        this.myPlaceholder = '请输入教师工号 '
      } else {
        this.myPlaceholder = '请输入学号'
      }

    },

    onLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)
          // const res = login(this.form)
          // console.log(res,"请求2")
          request.post("/login/login", this.form).then(response => {
            console.log(response)
            console.log("ghgh")
            if (response) {
              //存储用户信息到浏览器
              localStorage.setItem("user", JSON.stringify(response))
              this.$router.push('/home')
              // location.href = "http://localhost:8080/home";
              this.$message({
                message: '欢迎  [' + JSON.parse(localStorage.getItem("user")).userName + ']  好久不见！',
                showClose: true,
                type: 'success'
              });
            } else {
              this.$message({
                message: ' 学号/工号/密码/角色 不匹配！请修改后重试！',
                showClose: true,
                type: 'error'
              });
            }

          })
        }
      });
    }
  }
}
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/login-bg1.jpg);
  background-size: 100%;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 380px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>
